<template>
    <div>
        <div class="news">
            <router-link
                :to="{ path: '/jsgg/dec', query: { id: item.id } }"
                v-for="(item, index) in newsList"
                :key="index"
            >
                <img :src="prefixUrl + item.coverImageUrl" alt="无法显示" />
                <span>
                    <h1>{{ item.title }}</h1>
                    <p>{{ item.biref }}</p>
                    <p>{{ item.createTime | pattime }}</p>
                </span>
            </router-link>
        </div>
        <div class="news-page">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalSum"
                :page-size="sizeSum"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            newsList: [],
            totalSum: 3,
            sizeSum: 10,
            prefixUrl: "",
        };
    },
    props: {
        param: {
            type: Object,
        },
    },
    filters: {
        pattime(value) {
            const val = moment(value).format("YYYY年MM月DD日");
            return val.slice(0, 11);
        },
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        if (this.param) {
            this.getHyzxList(1);
        }
    },
    methods: {
        async getHyzxList(val) {
            const data = {
                currentPage: val,
                pageSize: 10,
                rootId: this.param.id,
            };
            const res = await this.$store.dispatch("news/getHyzxList", data);
            console.log(res);
            this.newsList = res.list;
            this.totalSum = res.totalCount;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getHyzxList(val);
        },
    },
    watch: {
        param: {
            handler(val, oldVal) {
                this.getHyzxList(1);
            },
            deep: true,
        },
    },
};
</script>

<style scoped>
.news {
    padding: 20px 0;
}

.news a {
    display: flex;
    padding-right: 15px;
    margin-bottom: 10px;
}

.news a img {
    width: 140px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.news a span {
    display: block;
    margin-left: 20px;
    flex: 1;
}

.news a span h1 {
    font-size: 17px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 685px;
}

.news a span p {
    font-size: 14px;
    color: #666;
    line-height: 23px;
    padding-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.news-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #c02636;
}
</style>
